<template>
  <div class="bg">
      <div class="wapper-content">
          <div class="buyheader" @click="chooseaddress">
              <van-icon name="location-o" size="40px" class="buyheader-icon"/>
              <div class="buyheader-address">
                  <span class="buyheader-name">{{addressList.name}}</span>
                  <span>{{addressList.tel}}</span>
                  <div class="buyheader-addressdetail">
                      {{addressList.detail}}
                  </div>
              </div>
              <van-icon name="arrow" size="20px" class="buyheader-icon-right"/>
          </div>
          <div v-for="(item,index) in buyGoodsList" :key="index">
              <div class="buybanner">
                  <van-card class="cartinfo" :desc="item.description" :title="item.title" :thumb="item.img" :price="item.price" :num="item.buyAmount"/>
              </div>
              <van-popup v-model="popShow" position="bottom" :style="{height:'75%'}">
                  <van-address-list v-if="addressData.length!==0" :list="addressData" v-model="defaultAddressId" @click-item="addressChange"/>
              </van-popup>
          </div>
      </div>
      <van-submit-bar :price="totalPrice*100" button-text="创建订单" @submit="createOrder()"/>
  </div>
</template>

<script>
import{mapMutations,mapState,mapGetters} from 'vuex'
export default {
  props: {
  },
  components: {
  },
  data() {
    return {
        totalPrice:0,
        buyMode:false,
        buyGoodsList:[],
        popShow:false,
        addressList:{},
        addressData:[],
        defaultAddressId:0,
    };
  },
  computed: {
      ...mapState(['buyOrderList']),
      ...mapMutations(['addOrder','clearCar'])
  },
  watch: {
  },
  created() {
      console.log(this.buyOrderList)
      this.buyGoodsList=this.buyOrderList
      this.totalPrice=this.buyGoodsList.reduce((prev,cur)=>{
          return prev+cur.price*cur.buyAmount
      },0)
      this.getAddressData()
  },
  methods: {
      getAddressData(){
          console.log('test')
          this.$http.get('/api/address').then(
              response=>{
                  console.log('address',response.data)
                  if(response.code===0){
                      this.addressData=response.data
                      this.addressData.map((item)=>{
                          item.address=item.detail
                          if(item.isDefault){
                              this.addressList=item
                              this.defaultAddressId=item.id
                          }
                      })
                  }
              },error=>{
                  console.log('address',error.msg)
              }
          )
      },
      addressChange(data){
          this.defaultAddressId=data.id
          this.addressList=this.addressData.find((item)=>item.id==data.id)
          this.popShow=false
      },
      createOrder(){
          let items=[]
          this.buyGoodsList.map((item)=>{
              items.push({
                  skuId:item.id,
                  count:item.buyAmount
              })
          })
          let form={
              items:items,
              addressId:this.defaultAddressId
          }
          this.$http.post('/api/order',form).then(
              response=>{
                  console.log('order',response.data)
                  if(response.code==0){
                      this.$toast.success('创建订单成功')
                      if(this.$route.params.buyMode==1){
                          this.$store.commit('clearCar')
                      }
                      this.$router.go(-1)
                  }
              },error=>{
                  console.log('order',error.msg)
              }
          )
      },
      chooseaddress(){
          this.popShow=true
      }
  },
};
</script>
<style scoped lang="less">
    .van-card{
        text-align: left;
        border-radius: 8px;
        background: white;
    }
    .van-address-list__bottom{
        display: none;
    }
    .van-address-item__edit{
        display: none;
    }
    .bg{
        width: 100%;
        height: calc(100% - 46px - 50px);
        position: absolute;
        overflow-y: auto;
        background: lightgray;
    }
    .buyheader{
        height: 100px;
        background: white;
        border-radius: 8px 8px ;
        margin: 10px 5px;
        .buyheader-icon{
            float: left;
            margin-top: 25px;
            margin-left: 30px;
            margin-right: 30px;
            border-bottom: black 2px solid;
            .buyheader-icon-right{
                position: absolute;
                top: 100px;
                right: 20px;
            }
        }
        .buyheader-address{
            float: left;
            margin-top: 20px;
            text-align: left;
        }
        .buyheader-name{
            margin-right: 50px;
        }
        .buyheader-addressdetail{
            margin-top: 5px;
        }
        
    }
    .buybanner{
        background: white;
        border-radius: 8px;
        margin: 10px 5px;
    }
    .but-bottom{
        border-radius: 0 0 8px 8px ;
    }
    .wrapper{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 100%;
    }
    .block{
        width: 100%;
        height: 60%;
        background-color: #fff;
    }
    .deliver{
        padding-top: 10px;
    }
    .exit{
        padding: 0 10px 0 0;
        float: right;
        font-size: 26px;
    }
    .kind{
        padding-top: 40px;
        text-align: left;
    }
    .explain{
        padding-left: 15px;
    }
    .check{
        float: right;
        zoom: 130%;
        margin: 2px 10px 0 0;
    }
    input[type='checkbox']::after{
        background-color: blue;
        color: white;
    }
    .finish{
        position: fixed;
        bottom: 10px;
        height: 50px;
        widows: 100%;
    }
    .finished{
        background-color: tomato;
        color: white;
        font-size: 20px;
        height: 35px;
        width: 90%;
        border: none;
        border-radius: 30px;
        align-items: flex-end;
        justify-content: center;
        height: 100%;
    }
</style>